<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASR WebSocket Test</title>
    <style>
        textarea {
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
            resize: none;
        }
        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>ASR WebSocket 测试页面</h1>
    <p>通过此页面，可以测试 ASR 实时 WebSocket 功能。</p>

    <h2>步骤：</h2>
    <ol>
        <li>点击 **"连接 WebSocket"** 按钮以建立连接。</li>
        <li>选择有效的音频文件（如 `.wav` 格式）。</li>
        <li>点击 **"发送音频数据"** 按钮开始上传并获取实时识别结果。</li>
        <li>点击 **"断开连接"** 按钮关闭连接。</li>
    </ol>

    <label for="audioFile">选择音频文件：</label>
    <input type="file" id="audioFile" accept="audio/*" /><br><br>

    <button id="connect">连接 WebSocket</button>
    <button id="sendAudio" disabled>发送音频数据</button>
    <button id="disconnect" disabled>断开连接</button><br><br>

    <h3>日志：</h3>
    <textarea id="log" readonly placeholder="日志将在此显示..."></textarea>

    <script>
        let ws = null;

        // 日志记录函数
        function log(message) {
            const logArea = document.getElementById("log");
            logArea.value += message + "\n";
            logArea.scrollTop = logArea.scrollHeight; // 滚动到最新日志
        }

        // 连接 WebSocket
        document.getElementById("connect").onclick = () => {
            if (ws) {
                log("WebSocket 已经连接！");
                return;
            }

            const wsUrl = "ws://127.0.0.1:9000/ws/asr"; // 替换为你的服务端 WebSocket 地址
            ws = new WebSocket(wsUrl);

            ws.onopen = () => {
                log("✅ WebSocket 已连接！");
                document.getElementById("sendAudio").disabled = false;
                document.getElementById("disconnect").disabled = false;
            };

            ws.onmessage = (event) => {
                try {
                    const response = JSON.parse(event.data);
                    if (response.success) {
                        log("🔊 实时识别结果: " + JSON.stringify(response.result, null, 2));
                    } else {
                        log("❌ 识别出错: " + response.error);
                    }
                } catch (err) {
                    log("❌ 无法解析响应: " + event.data);
                }
            };

            ws.onerror = (error) => {
                log("❌ WebSocket 错误: " + error.message);
            };

            ws.onclose = () => {
                log("🔒 WebSocket 已断开连接！");
                ws = null;
                document.getElementById("sendAudio").disabled = true;
                document.getElementById("disconnect").disabled = true;
            };
        };

        // 发送音频数据
        document.getElementById("sendAudio").onclick = () => {
            const fileInput = document.getElementById("audioFile");
            const file = fileInput.files[0];

            if (!file) {
                alert("请先选择音频文件！");
                return;
            }

            const reader = new FileReader();
            reader.onload = function () {
                const audioData = reader.result; // 获取音频数据
                log("📤 开始发送音频数据...");
                try {
                    ws.send(audioData); // 发送音频数据
                    ws.send(new Uint8Array([])); // 发送空数据作为结束标志帧
                    log("✅ 音频数据发送完成！");
                } catch (err) {
                    log("❌ 数据发送失败: " + err.message);
                }
            };

            reader.readAsArrayBuffer(file); // 读取文件为二进制数据
        };

        // 断开连接
        document.getElementById("disconnect").onclick = () => {
            if (ws) {
                ws.close();
            }
        };
    </script>
</body>
</html>